import { exportNews } from '@/services/api/api-newsManage';
import { DrawerForm } from '@ant-design/pro-components';
import { Button, message } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

interface PreviewDrawerHTMLProps {
  dataSource: PreviewDrawerBean.PreviewBean[];
}
const PreviewDrawerHTML: React.FC<PreviewDrawerHTMLProps> = ({ dataSource }) => {
  const [drawerVisit, setDrawerVisit] = useState(false);
  const [menuDataSource, setMenuSourceState] = useState<PreviewDrawerBean.PreviewBean[]>([]);

  const rendering = () => {
    let list = new Array();

    let item01: PreviewDrawerBean.PreviewBean = {
      menuKey: '01',
      menuLabel: '时政要闻',
      selecteds: [],
    };
    list.push(item01);
    let item02: PreviewDrawerBean.PreviewBean = {
      menuKey: '02',
      menuLabel: '全国热闻',
      selecteds: [],
    };
    list.push(item02);
    let item03: PreviewDrawerBean.PreviewBean = {
      menuKey: '03',
      menuLabel: '重庆要情',
      selecteds: [],
    };
    list.push(item03);
    let item04: PreviewDrawerBean.PreviewBean = {
      menuKey: '04',
      menuLabel: '其他省市',
      selecteds: [],
    };
    list.push(item04);

    dataSource.forEach((item) => {
      if (item.menuKey === '340786' ||item.menuKey === '341651' ) {
        list.forEach((entity) => {
          if (entity.menuKey === '01') {
            entity.selecteds = entity.selecteds.concat(item.selecteds);
          }
        });
      }
      if (item.menuKey === '340787') {
        list.forEach((entity) => {
          if (entity.menuKey === '02') {
            entity.selecteds = entity.selecteds.concat(item.selecteds);
          }
        });
      }
      if (
        item.menuKey === '340802' ||
        item.menuKey === '340789'
      ) {
        list.forEach((entity) => {
          if (entity.menuKey === '03') {
            entity.selecteds = entity.selecteds.concat(item.selecteds);
          }
        });
      }
      if (item.menuKey === '340790' || item.menuKey === '342040') {
        list.forEach((entity) => {
          if (entity.menuKey === '04') {
            entity.selecteds = entity.selecteds.concat(item.selecteds);
          }
        });
      }
    });

    const l = list.filter((item) => item.selecteds.length !== 0);

    setMenuSourceState(l);
  };

  useEffect(() => {
    rendering();
  }, [drawerVisit]);

  return (
    <DrawerForm<{
      name: string;
      company: string;
    }>
      title="预览"
      trigger={
        <Button key="preview" type="primary">
          预览
        </Button>
      }
      drawerProps={{
        destroyOnClose: true,
        maskClosable: true,
      }}
      submitter={{
        searchConfig: {
          submitText: '导出',
        },
      }}
      onOpenChange={setDrawerVisit}
      onFinish={async (values) => {
        console.log(values.name);
        // 不返回不会关闭弹框

        exportNews({ dataSource: menuDataSource })
          .then(() => {
            message.success('导出成功');
          })
          .catch(() => {});

        return true;
      }}
    >
      <div>
        <p style={{ minHeight: '100px', lineHeight: '100px', textAlign: 'center' }}>
          <span
            style={{
              minHeight: '100px',
              fontSize: '100px',
              fontWeight: 'bold',
              fontFamily: '华文新魏',
              color: '#ff0000',
              lineHeight: '100px',
            }}
          >
            要情信息
          </span>
          <span id="_GoBack"></span>
        </p>
        <p style={{ minHeight: '26.5px', lineHeight: '26.5px', textAlign: 'center' }}>
          <span style={{ minHeight: '16px', fontSize: '16px' }}>2022年第XXX期</span>
        </p>
        <p style={{ minHeight: '25.9px', lineHeight: '25.9px', textAlign: 'center' }}>
          <span style={{ minHeight: '16px', fontSize: '16px' }}>（总第XXX期）</span>
        </p>
        <p style={{ minHeight: '26.5px', lineHeight: '26.5px', textAlign: 'center' }}>&nbsp;</p>
        <p
          style={{
            minHeight: '25.9px',
            lineHeight: '25.9px',
            justifyContent: 'space-between',
            display: 'flex',
          }}
        >
          <span style={{ minHeight: '16px', fontSize: '16px' }}>重庆高新区融媒体中心</span>
          <span style={{ minHeight: '16px', fontSize: '16px' }}>
            {dayjs().format('YYYY年MM月DD日')}
          </span>
        </p>
        <div style={{ border: '1px solid #FF0000' }}></div>
        <p
          style={{ marginBottom: '0px', minHeight: '30px', lineHeight: '30px', textIndent: '32px' }}
        >
          &nbsp;
        </p>
        {menuDataSource.map((item) => (
          <>
            <p style={{ minHeight: '30px', lineHeight: '30px' }}>
              <span id="_Hlk91712898"></span>
              <span style={{ fontWeight: 'bold', minHeight: '18px', fontSize: '18px' }}>
                【{item.menuLabel}】
              </span>
            </p>
            <p
              style={{
                marginTop: '0px',
                marginBottom: '0px',
                minHeight: '28.5px',
                lineHeight: '28.5px',
                textAlign: 'justify',
                verticalAlign: 'baseline',
              }}
            >
              &nbsp;
            </p>
            <p
              style={{
                marginTop: '0px',
                marginBottom: '0px',
                minHeight: '28.5px',
                lineHeight: '28.5px',
                textAlign: 'justify',
                verticalAlign: 'baseline',
              }}
            >
              {item.selecteds.map((row) => (
                <>
                  <span style={{ fontFamily: '黑体', fontWeight: 'normal', color: '#000000' }}>
                    △
                  </span>
                  {item.menuLabel === '其他省市' ? (
                    <span style={{ fontFamily: '黑体', fontWeight: 'normal', color: '#000000' }}>
                      <b> {row.province}：</b>
                    </span>
                  ) : (
                    <></>
                  )}
                  <span style={{ fontFamily: '黑体', fontWeight: 'normal', color: '#000000' }}>
                    <b>
                      {row.title}
                      {item.menuLabel === '其他省市' ? '：' : '。'}
                    </b>
                  </span>
                  <span
                    style={{
                      fontFamily: 'Times New Roman',
                      fontWeight: 'normal',
                      whiteSpace: 'pre-line',
                    }}
                  >
                    {row.generalization == undefined ? row.summaries : row.generalization}
                  </span>
                  <span style={{ fontFamily: 'Times New Roman', fontWeight: 'normal' }}>
                    （{row.site}）
                  </span>
                  <p
                    style={{
                      marginTop: '0px',
                      marginBottom: '0px',
                      minHeight: '28.5px',
                      lineHeight: '28.5px',
                      textAlign: 'justify',
                      verticalAlign: 'baseline',
                    }}
                  >
                    &nbsp;
                  </p>
                </>
              ))}
            </p>
            <p
              style={{
                marginTop: '0px',
                marginBottom: '0px',
                minHeight: '28.5px',
                lineHeight: '28.5px',
                textAlign: 'justify',
                verticalAlign: 'baseline',
              }}
            >
              &nbsp;
            </p>
          </>
        ))}
        <div
          style={{
            borderTop: '0.5px solid black',
          }}
        ></div>

        <span style={{ minHeight: '16px', fontSize: '14px' }}>呈送：高新区党工委管委会领导。</span>
        <div
          style={{
            borderTop: '0.5px solid black',
          }}
        ></div>
        <div
          style={{
            justifyContent: 'space-between',
            display: 'flex',
          }}
        >
          <span style={{ minHeight: '14px', fontSize: '14px' }}>重庆高新区融媒体中心</span>
          <span style={{ minHeight: '14px', fontSize: '14px' }}>
            {dayjs().format('YYYY年MM月DD日')}印发
          </span>
        </div>
        <div
          style={{
            borderTop: '0.5px solid black',
          }}
        ></div>
      </div>
    </DrawerForm>
  );
};

export default PreviewDrawerHTML;
